{% extends 'app01/article_cellation.html' %}
{% block css %}
    <style>
     .scor_class::-webkit-scrollbar { width: 0 !important }
    </style>
{% endblock %}
{% block person_manage %}
    <a class="navbar-brand" href="#">私信聊天</a>
{% endblock %}

{% block all_li %}
    <li role="presentation" class="active">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">聊天记录</a></li>
    <li role="presentation" class="active">
        <a href="{% url 'app01_backend' %}" style="color: #337ab7">返回个人管理</a></li>

{% endblock %}

{% block all_content %}
    {% block suibi %}
        <div class="panel panel-default">
            <div class="panel-heading">聊天对象：{{ user.username }}</div>
            <div class="panel-body scor_class" style="height:350px;width:800px;overflow:auto; " id="div_id">
                {% for cont in content %}
                    {% if cont.send == user.id %}
                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                     <img src="/media/{{ user.avatar }}" alt="..." class="img-circle" height="60">
                                </a>
                            </div>
                            <div class="media-body">
                                 <h4 class="media-heading">{{ user.username }}</h4>
                                <p>{{ cont.content }}</p>
                                <p>{{ cont.create_time }}</p>
                            </div>
                        </div>
                    {% endif %}
                    {% if cont.send == request.user.id %}
                        <div class="media" >
                            <div class="media-body" style="text-align:right;margin-right: 10px">
                                 <h4 class="media-heading">{{ request.user.username }}</h4>
                                <p>{{ cont.content }}</p>
                                <p>{{ cont.create_time }}</p>
                            </div>
                         <div class="media-right">
                                <a href="#">
                                     <img src="/media/{{ request.user.avatar }}" alt="..." class="img-circle" height="60">
                                </a>
                            </div>
                        </div>

                    {% endif %}
                    <hr>


                {% endfor %}

            </div>
            <hr>
            <div>

                <div class="row">
                    <div class="col-md-10 "><input type="text" class="form-control" id="cont_id"> </div>
                    <div class="col-md-2"><button class="btn btn-success btn-block" id="btn_cont_submit">发送</button></div>
                </div>
            </div>
            <br>
        </div>
        

    {% endblock %}

{% endblock %}

{% block js %}

<script>
    $('#btn_cont_submit').click(function () {
        let content = $('#cont_id').val()
        $.ajax({
            url:'',
            type:'post',
            data:{'content':content,'recv':'{{ user.id }}'},
            success:function (attr) {
                if (attr.code===100){
                    window.location.reload()
                }
                else {
                    alert(attr.msg)
                }

            }
        })
    })

</script>
{% endblock %}
